vue 基本指令|博客系列

# 一、常用指令

v-text

更新元素的 textContent

<h1 v-text="msg"></h1>

@前端进阶之旅: 代码已经复制到剪贴板

v-html

更新元素的 innerHTML

<h1 v-html="msg"></h1>

@前端进阶之旅: 代码已经复制到剪贴板

v-bind

当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
<script>
    // 2 创建 Vue 的实例对象
    var vm = new Vue({
      // el 用来指定vue挂载到页面中的元素，值是：选择器
      // 理解：用来指定vue管理的HTML区域
      el: '#app',
      // 数据对象，用来给视图中提供数据的
      data: {
        url: 'http://www.baidu.com'
      }
    })
  </script>

@前端进阶之旅: 代码已经复制到剪贴板

v-on

作用：绑定事件
语法：v-on:click="say" or v-on:click="say('参数', $event)"
简写：@click="say"
说明：绑定的事件从methods中获取

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
<!-- 方法传参 -->
<a @click="doSomething（“123”）"></a>
 <script>
    // 2 创建 Vue 的实例对象
    var vm = new Vue({
      el: '#app',
      // methods属性用来给vue实例提供方法（事件）
      methods: {
        doSomething: function(str) {
          //接受参数，并输出
          console.log(str);
        }
      }
    })
  </script>

@前端进阶之旅: 代码已经复制到剪贴板

事件修饰符

.stop 阻止冒泡，调用 event.stopPropagation()
.prevent 阻止默认事件，调用 event.preventDefault()
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身（比如不是子元素）触发时触发回调
.once 事件只触发一次

v-model

作用：在表单元素上创建双向数据绑定
说明：监听用户的输入事件以更新数据

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

@前端进阶之旅: 代码已经复制到剪贴板

v-for

基于源数据多次渲染元素或模板块

<!-- 1 基础用法 -->
<div v-for="item in items">
  {{ item.text }}
</div>
<!-- item 为当前项，index 为索引 -->
<p v-for="(item, index) in list">{{item}} -- {{index}}</p>
<!-- item 为值，key 为键，index 为索引 -->
<p v-for="(item, key, index) in obj">{{item}} -- {{key}}</p>
<p v-for="item in 10">{{item}}</p>

@前端进阶之旅: 代码已经复制到剪贴板

key属性

推荐：使用 v-for 的时候提供 key 属性，以获得性能提升。
说明：使用 key，VUE会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
官方解释：当 Vue.js用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的 track-by="$index"

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

@前端进阶之旅: 代码已经复制到剪贴板

# 二、样式处理 -class和style

说明：这两个都是HTML元素的属性，使用v-bind，只需要通过表达式计算出字符串结果即可
表达式的类型：字符串、数组、对象

<!-- 1 -->
<div v-bind:class="{ active: true }"></div> ===>
<div class="active"></div>
<!-- 2 -->
<div :class="['active', 'text-danger']"></div> ===>
<div class="active text-danger"></div>
<!-- 3 -->
<div v-bind:class="[{ active: true }, errorClass]"></div> ===>
<div class="active text-danger"></div>
--- style ---
<!-- 1 -->
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<!-- 2 将多个 样式对象 应用到一个元素上-->
<div v-bind:style="[baseStyles, overridingStyles]"></div>
--- script ---
<script>
    // 2 创建 Vue 的实例对象
    var vm = new Vue({
      el: '#app',
      data: {
        activeColor: 'red',
        fontSize: 30,
        baseStyles: {
          color: 'red',
          'font-size': '30px'
        },
        overridingStyles: {
          color: 'green',
        }
      }
    })
  </script>

@前端进阶之旅: 代码已经复制到剪贴板

# 三、v-if 和 v-show

条件渲染

v-if：根据表达式的值的真假条件，销毁或重建元素
v-show：根据表达式之真假值，切换元素的 display CSS 属性

# 四、提升用户体验：v-cloak

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
防止刷新页面，网速慢的情况下出现{ message }等数据格式

<div v-cloak>
  {{ message }}
</div>

@前端进阶之旅: 代码已经复制到剪贴板

# 五、提升性能

v-pre

说明：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译

<span v-pre>{{ this will not be compiled }}</span>

@前端进阶之旅: 代码已经复制到剪贴板

v-once

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能

<span v-once>This will never change: {{msg}}</span>

@前端进阶之旅: 代码已经复制到剪贴板

# 六、Dom元素获取: v-ref

在父组件上注册一个子组件的索引,便于直接访问,不需要表达式,必须提供参数id。可以通过父组件的$refs对象访问子组件

当v-ref和v-for一起使用时,注册的值将是一个数组，包含多有的子组件，对应于绑定数组；如果v-for使用在一个对象上，注册的值将是一个对象，包含所有的子组件，对应于绑定对象

Dom元素获取: v-el

为Dom元素注册一个索引，方便通过所属实例的$els访问这个元素,可以用v-el：some-el设置this.$els.someEl.

<span v-el:msg>hello</span>

<span v-el:other-msg>world</span>

@前端进阶之旅: 代码已经复制到剪贴板

通过this.$els获取相应的DOM元素:

this.$els.msg.textContent  // ==>  "hello"

this.$els.otherMsg.textContent  // ==>  "world"

@前端进阶之旅: 代码已经复制到剪贴板

# 一、常用指令

v-text

更新元素的 textContent

<h1 v-text="msg"></h1>

@前端进阶之旅: 代码已经复制到剪贴板

v-html

更新元素的 innerHTML

<h1 v-html="msg"></h1>

@前端进阶之旅: 代码已经复制到剪贴板

v-bind

当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
<script>
    // 2 创建 Vue 的实例对象
    var vm = new Vue({
      // el 用来指定vue挂载到页面中的元素，值是：选择器
      // 理解：用来指定vue管理的HTML区域
      el: '#app',
      // 数据对象，用来给视图中提供数据的
      data: {
        url: 'http://www.baidu.com'
      }
    })
  </script>

@前端进阶之旅: 代码已经复制到剪贴板

v-on

作用：绑定事件
语法：v-on:click="say" or v-on:click="say('参数', $event)"
简写：@click="say"
说明：绑定的事件从methods中获取

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
<!-- 方法传参 -->
<a @click="doSomething（“123”）"></a>
 <script>
    // 2 创建 Vue 的实例对象
    var vm = new Vue({
      el: '#app',
      // methods属性用来给vue实例提供方法（事件）
      methods: {
        doSomething: function(str) {
          //接受参数，并输出
          console.log(str);
        }
      }
    })
  </script>

@前端进阶之旅: 代码已经复制到剪贴板

事件修饰符

.stop 阻止冒泡，调用 event.stopPropagation()
.prevent 阻止默认事件，调用 event.preventDefault()
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身（比如不是子元素）触发时触发回调
.once 事件只触发一次

v-model

作用：在表单元素上创建双向数据绑定
说明：监听用户的输入事件以更新数据

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

@前端进阶之旅: 代码已经复制到剪贴板

v-for

基于源数据多次渲染元素或模板块

<!-- 1 基础用法 -->
<div v-for="item in items">
  {{ item.text }}
</div>
<!-- item 为当前项，index 为索引 -->
<p v-for="(item, index) in list">{{item}} -- {{index}}</p>
<!-- item 为值，key 为键，index 为索引 -->
<p v-for="(item, key, index) in obj">{{item}} -- {{key}}</p>
<p v-for="item in 10">{{item}}</p>

@前端进阶之旅: 代码已经复制到剪贴板

key属性

推荐：使用 v-for 的时候提供 key 属性，以获得性能提升。
说明：使用 key，VUE会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
官方解释：当 Vue.js用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的 track-by="$index"

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

@前端进阶之旅: 代码已经复制到剪贴板

# 二、样式处理 -class和style

说明：这两个都是HTML元素的属性，使用v-bind，只需要通过表达式计算出字符串结果即可
表达式的类型：字符串、数组、对象

<!-- 1 -->
<div v-bind:class="{ active: true }"></div> ===>
<div class="active"></div>
<!-- 2 -->
<div :class="['active', 'text-danger']"></div> ===>
<div class="active text-danger"></div>
<!-- 3 -->
<div v-bind:class="[{ active: true }, errorClass]"></div> ===>
<div class="active text-danger"></div>
--- style ---
<!-- 1 -->
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<!-- 2 将多个 样式对象 应用到一个元素上-->
<div v-bind:style="[baseStyles, overridingStyles]"></div>
--- script ---
<script>
    // 2 创建 Vue 的实例对象
    var vm = new Vue({
      el: '#app',
      data: {
        activeColor: 'red',
        fontSize: 30,
        baseStyles: {
          color: 'red',
          'font-size': '30px'
        },
        overridingStyles: {
          color: 'green',
        }
      }
    })
  </script>

@前端进阶之旅: 代码已经复制到剪贴板

# 三、v-if 和 v-show

条件渲染

v-if：根据表达式的值的真假条件，销毁或重建元素
v-show：根据表达式之真假值，切换元素的 display CSS 属性

# 四、提升用户体验：v-cloak

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
防止刷新页面，网速慢的情况下出现{ message }等数据格式

<div v-cloak>
  {{ message }}
</div>

@前端进阶之旅: 代码已经复制到剪贴板

# 五、提升性能

v-pre

说明：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译

<span v-pre>{{ this will not be compiled }}</span>

@前端进阶之旅: 代码已经复制到剪贴板

v-once

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能

<span v-once>This will never change: {{msg}}</span>

@前端进阶之旅: 代码已经复制到剪贴板

# 六、Dom元素获取: v-ref

在父组件上注册一个子组件的索引,便于直接访问,不需要表达式,必须提供参数id。可以通过父组件的$refs对象访问子组件

当v-ref和v-for一起使用时,注册的值将是一个数组，包含多有的子组件，对应于绑定数组；如果v-for使用在一个对象上，注册的值将是一个对象，包含所有的子组件，对应于绑定对象

Dom元素获取: v-el

为Dom元素注册一个索引，方便通过所属实例的$els访问这个元素,可以用v-el：some-el设置this.$els.someEl.

<span v-el:msg>hello</span>

<span v-el:other-msg>world</span>

@前端进阶之旅: 代码已经复制到剪贴板

通过this.$els获取相应的DOM元素:

this.$els.msg.textContent  // ==>  "hello"

this.$els.otherMsg.textContent  // ==>  "world"

@前端进阶之旅: 代码已经复制到剪贴板